<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-小试牛刀</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        案例核心：
            mounted 代表页面初次加载完毕，可以做一些事情
            当数据手动更新之后，会触发页面重新加载，重复操作
     -->
    <div id="demo">
        <h1 :style="{ opacity: num }">hello 尚硅谷！</h1>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                num: 1
            },
            // data 同级，直接是一个函数，mount 挂载的意思
            mounted() {
                // 页面加载了
                console.log(10086);
                setInterval(() => {
                    //  console.log(100)
                    // this.num = this.num - 0.01
                    this.num -= 0.01

                    // 如果重新给数据赋值，会触发页面的更新
                    if(this.num <= 0) this.num = 1
                }, 16)
            }
        })
    </script>
</body>
</html>